<div id="app">
    <admin-page-header>
        <bi-button icon="fa-plus" @click="addTagDialog"  type="primary">添加标签</bi-button>
        <bi-button  @click="openGroupDialog" >管理分组</bi-button>
    </admin-page-header>
    <div class="container">
        <div class="row g-3">
            <div class="col-12">
                <bi-card title="搜索">
                    <div class="row g-3">
                        <div class="col-12 col-sm-6 col-lg-6">
                            <bi-select v-model="search.group_id" placeholder="分组">
                                <bi-select-option v-for="(item,index) in groupList" :key="item.group_id" :value="item.group_id" :label="item.title" ></bi-select-option>
                            </bi-select>
                        </div>
                        
                        <div class="col-12 col-sm-6 col-lg-6">
                            <bi-input v-model="search.keyword"  placeholder="" icon="fa fa-search" ></bi-input>
                        </div>
                    </div>
                </bi-card>
                
            </div>
            <div class="col-12">
                <bi-card title="标签列表" >
                    <div class="content">
                    <div class="tag-list" >
                        <div class="tag-item" v-for="item,index in list" :key="item.tag_id">
                            <span>{{item.title}}</span>
                            <bi-icon data="fa-close" @click="del(item,index)"></bi-icon>
                        </div>
                        
                        <div class="tag-item" v-if="pageCount>page" @click="nextPage">
                            <bi-icon data="fa-angle-double-right" ></bi-icon>
                        </div>
                    </div>
                    </div>
                </bi-card>
            </div>
        </div>
    </div>
</div>

<script>
import {debounce} from '@@/admin/assets/js/global.js';
import groupDialog from 'goodsTag/group-dialog.vue';
import addTagDialog from 'goodsTag/add-tag-dialog.vue';
let app = admin.createApp({
    data(){

        let search  = {
            group_id:'',
            keyword:'',
        }

        //this.$assign(search,this.$status.get('search'));

        return {
            search,
            groupList:[],
            list:[],
            page:1,
            total:0,
            pageCount:0
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                this.page = 1;
                this.getList();
            },1000),
            deep:true
        }       
    },
    methods:{
        getGroupList(){
            this.$ajax({
                url:this.$url({action:'groupList'}),
                success:(res)=>{
                    this.groupList = res;
                }
            })
        },
        getList(){
            this.$ajax({
                url:this.$url({action:'list'}),
                data:{
                    page:this.page,
                    ...this.search
                },
                success:(res)=>{
                    this.list = res.list;
                    this.pageCount  = res.pageCount;
                    this.total =res.total;
                }
            })
        },
        openGroupDialog(){
            this.$dialog({
                type:'vue',
                content:admin.createApp(groupDialog),
                callback:()=>{
                    this.getGroupList();
                    this.getList();
                }
            });
        },
        addTagDialog(){
            this.$dialog({
                type:'vue',
                content:admin.createApp(addTagDialog),
                callback:()=>{
                    this.getList();
                }
            });
        },
        nextPage(){
            this.page++;
            this.getList();
        },
        del(item,index){
            this.$confirm('确定要删除这个['+item.title+']标签吗？',()=>{
                this.$ajax({
                    url:this.$url({action:'delTag'}),
                    data:{
                        tag_id:item.tag_id
                    },
                    success:()=>{
                        this.list.splice(index,1);
                    }
                })
            })
        }
    },
    mounted(){
        this.getGroupList();
        this.getList();
    }
}).mount('#app');

</script>


<style>
.content{
    min-height: 300px;
}
.tag-list{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tag-item{
    padding: 5px 10px;
    border-radius: 5px;
    background-color: var(--bs-gray-200);
    font-size: 14px;
}
.tag-item .fa-close{
    cursor: pointer;
    margin-left: 10px;
    color: var(--bs-gray-500);
}

.tag-item .fa-close:hover{
    color: var(--bs-gray-600);
}
</style>